<template>
    <div id="apparea" class="attach_wrap anipage">
        <pageheader :title="'附件上传'">
            <p class="nav_right" slot="right" @click="submitques" v-if="!hidden">提交</p>
        </pageheader>
        <div class="wl_content">
            <div class="tip_tt">
                过磅单上传
            </div>
            <div class="pic_wrap">
                <div class="img_item" v-for="(item,index) in fileList1" :key="index" @click="previewimg('fileList1',index)">
                    <van-icon name="clear" class="vanicon" size="24" color="#f0464e" @click.stop="removepic('fileList1',index)" />
                    <img :src="item.url" alt="">
                </div>
                <div class="uploadbtn" @click="triggercamera('fileList1')">
                    <van-icon name="photograph" class="vanicon" size="26" color="#dcdee0" />
                </div>
            </div>
        </div>
        <div class="wl_content">
            <div class="tip_tt">
                柜门照片
            </div>
            <div class="pic_wrap">
                <div class="img_item" v-for="(item,index) in fileList2" :key="index" @click="previewimg('fileList2',index)">
                    <van-icon name="clear" class="vanicon" size="24" color="#f0464e" @click.stop="removepic('fileList2',index)" />
                    <img :src="item.url" alt="">
                </div>
                <div class="uploadbtn" @click="triggercamera('fileList2')">
                    <van-icon name="photograph" class="vanicon" size="26" color="#dcdee0" />
                </div>
            </div>
        </div>
        <div class="wl_content">
            <div class="tip_tt">
                封条照片
            </div>
            <div class="pic_wrap">
                <div class="img_item" v-for="(item,index) in fileList3" :key="index" @click="previewimg('fileList3',index)">
                    <van-icon name="clear" class="vanicon" size="24" color="#f0464e" @click.stop="removepic('fileList3',index)" />
                    <img :src="item.url" alt="">
                </div>
                <div class="uploadbtn" @click="triggercamera('fileList3')">
                    <van-icon name="photograph" class="vanicon" size="26" color="#dcdee0" />
                </div>
            </div>
        </div>
        <div class="wl_content">
            <div class="tip_tt">
                装货图片
            </div>
            <div class="pic_wrap">
                <div class="img_item" v-for="(item,index) in fileList4" :key="index" @click="previewimg('fileList4',index)">
                    <van-icon name="clear" class="vanicon" size="24" color="#f0464e" @click.stop="removepic('fileList4',index)" />
                    <img :src="item.url" alt="">
                </div>
                <div class="uploadbtn" @click="triggercamera('fileList4')">
                    <van-icon name="photograph" class="vanicon" size="26" color="#dcdee0" />
                </div>
            </div>
        </div>
        <div class="wl_content">
            <div class="tip_tt">
                签收照片
            </div>
            <div class="pic_wrap">
                <div class="img_item" v-for="(item,index) in fileList5" :key="index" @click="previewimg('fileList5',index)">
                    <van-icon name="clear" class="vanicon" size="24" color="#f0464e" @click.stop="removepic('fileList5',index)" />
                    <img :src="item.url" alt="">
                </div>
                <div class="uploadbtn" @click="triggercamera('fileList5')">
                    <van-icon name="photograph" class="vanicon" size="26" color="#dcdee0" />
                </div>
            </div>
        </div>
        <input ref="imgchoose" class="fileImage" type="file" capture="camera" accept="image/*" @change="imgonchange($event)">
    </div>
</template>

<script>
import pageheader from "@/components/public/pageheader.vue";
import { CosUpload, CosDelete } from "@/utils/cosUpload.js";
import animationminx from "@/mixins/animationminx.js";
import { ImagePreview } from 'vant';
export default {
    name: "attachwrap",
    mixins: [animationminx],
    components:{
        pageheader
    },
    data() {
        return {
            fileList1:[],
            fileList2:[],
            fileList3:[],
            fileList4:[],
            fileList5:[],
            activekey:'',
            hidden:false,
        }
    },
    methods:{
        imgonchange:function(res){
            var file = res.target.files[0];
            var _this=this;
            var loading = _this.$toast.loading({
                duration:10000,
                message:'图片上传中···'
            })
            CosUpload(file,'mikeyattach',function(status,res){
                loading.clear();
                if(res)
                {
                    if(_this.activekey)
                    {
                        _this[_this.activekey].push(res);
                    }else{
                        CosDelete(res.key,(tt)=>{
                        })
                    }
                    _this.$refs.imgchoose.value=null;
                }else{
                   _this.$toast('图片上传失败');
                }
            })
        },
        removepic:function(key,index){
            var wkey=this[key][index].key;
            var _this=this;
            _this[key].splice(index,1);
            CosDelete(wkey,(res)=>{
                if(!res)
                {
                   // dosomething
                }
            })
        },
        submitques:function(){
            
        },
        triggercamera:function(key){
            this.activekey=key;
            this.$refs.imgchoose.click();
        },
        previewimg:function(key,index){
            ImagePreview(this[key].map((f)=>{return f.url}),index);
        }
    },
    mounted:function(){
        
    }
};
</script>

<style lang="less" scoped>
.attach_wrap{
    width: 100%;
    height: auto;
    padding-bottom: 50px;
    .nav_right{
        color: #F43530;
    }
    .fileImage{
        display: none;
    }
    .feedbacktype{
        width: 100%;
        height: auto;
        .type_wrap{
            padding:.2rem 0.4rem;
            .van-radio{
                margin-bottom: .5rem;
            }
            .feed_item{
                font-size: .34rem;
                color: #666;
            }
        }
    }
    .wl_title{
        width: 100%;
        height: auto;
        .tt_wrap{
            width: 100%;
            border: 1px solid #eee;
            border-left: none;
            border-right: none;
        }
    }
    .tip_tt{
        position: relative;
        height: 1rem;
        line-height: 1rem;
        font-size: .36rem;
        color: #666;
        text-indent: .4rem;
        text-align: left;
    }
    .tip_tt::before{
        position: absolute;
        top: .3rem;
        height: .4rem;
        width: 4px;
        background-color: #F76260;
        left: .1rem;
        content: " ";
    }
    .wl_content{
        width: 100%;
        height: auto;
        margin-top: .2rem;
        .ct_wrap{
            border: 1px solid #eee;
            border-left: none;
            border-right: none;
        }
        .ct_desc{
            width: 100%;
            .desc_content{
                padding: .2rem .3rem;
                text-align: left;
                font-size: .36rem;
                color: #999;
            }
        }
        .pic_wrap{
            padding: .2rem;
            text-align: left;
            font-size: 0px;
            .img_item{
                display: inline-block;
                width: 2rem;
                height: 2rem;
                position: relative;
                margin-right: .2rem;
                margin-top: .2rem;
                vertical-align: top;
                .vanicon{
                    position: absolute;
                    top: 0;
                    right: 0px;
                    background-color: rgba(0,0,0,.5);
                    border-radius: 50%;
                }
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
            }
            .uploadbtn{
                width: 2rem;
                height: 2rem;
                background-color: #F7F8FA;
                text-align: center;
                line-height: 2rem;
                display: inline-block;
                margin-top: .2rem;
                vertical-align: top;
                .vanicon{
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>
